// 自定义指令  在main中导入使用
// 导入vuex
import store from '@/store'
// 导入枚举数据
import employeesDate from '@/api/constant/employees'
export default {
  // 1. 处理错误图片显示不出来的问题
  imgError: {
    // dom渲染完毕的钩子函数
    inserted(dom, obj, vnode) {
      console.log(dom, obj, vnode)
      // 当图片存在时用该图片 否则用自定义的图片
      dom.src = dom.src || obj.value
      // 图片加载错误时的监听事件
      dom.onerror = function() {
        dom.src = obj.value
      }
    },
    // 更新完成后的钩子函数
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value
      // 加载错误的监听会一直监听到,不需重复监听
    },
    // 销毁前 撤掉监听错误事件
    unbind(dom) {
      dom.onerror = null
    }
  },
  // 2.处理枚举的数据 聘用形式
  formatterFormOf: {
    inserted(dom, obj) {
      // 数组的find方法 找到符合条件的项
      const temp = employeesDate.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = temp ? temp.value : '-'
    },
    componentUpdated(dom, obj) {
      // 数组的find方法 找到符合条件的项
      const temp = employeesDate.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = temp ? temp.value : '-'
    }
  },
  // 3.自定义 处理按钮权限 的显示与隐藏
  setButtonPower: {
    inserted(dom, obj) {
      console.log(store.state.user.userInfo.roles.points)
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    },
    componentUpdated(dom, obj) {
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        dom.style.display = 'none'
      }
    }
  }
}
